<html>
  <head>
    <title>Segmented Area</title>
    <script type="text/javascript" src="../../protovis.js"></script>
  </head>
  <body>
    <script type="text/javascript+protovis">

var vis = new pv.Panel()
    .width(500)
    .height(200)
    .top(50)
    .bottom(50)
    .left(10)
    .right(10);

vis.add(pv.Area)
    .segmented(true)
    .data(function() pv.range(0, 6, .1).map(Math.sin))
    .bottom(0)
    .left(function() this.index / 59 * 500)
    .height(function(d) (d + 1) / 2 * 200 + 50)
    .fillStyle(function(d) "hsl(" + (d + 1) * 180 + ",50,50)");

vis.render();

    </script>
  </body>
</html>
